const state = {
  showAppBar: false,
  appBarTitle: '',
  userInfo: null,
  conHeight: 0,
}

// getters
const getters = {
  getShellEnv: (string, getters) => {
    return state.showAppBar;
  },
  getAppBarTitle: (string, getters) => {
    return state.appBarTitle;
  },
  getUserInfo: (string, getters) => {
    return state.userInfo;
  },
  getConHeight: (string, getters) => {
    return state.conHeight.toString();
  }
}

// actions
const actions = {
  setShellEnv({ commit, state }, arg) {
    commit('updateShellEnv', arg);
  },
  setAppBarTitle({ commit, state }, arg) {
    commit('updateAppBarTitle', arg);
  },
  setUserInfo({ commit, state }, arg) {
    commit('updateUserInfo', arg);
  },
  setConHeight({ commit, state }, arg) {
    let vHeader = document.querySelector('#vHeader') ? document.querySelector('#vHeader').offsetHeight : 0,
        vProgress = document.querySelector('#vProgress') ? document.querySelector('#vProgress').offsetHeight : 0,
        vFooter = document.querySelector('#vFooter') ? document.querySelector('#vFooter').offsetHeight : 0,
        vBBar = document.querySelector('#detailBottom') ? document.querySelector('#detailBottom').offsetHeight : 0,
        vBar = document.querySelector('#vBar') ? document.querySelector('#vBar').offsetHeight : 0,
        vBBInfoCard = document.querySelector('.car-bbinfo-card') ? document.querySelector('.car-bbinfo-card').offsetHeight : 0,
        vBBtitle = document.querySelector('.bbtitle') ? document.querySelector('.bbtitle').offsetHeight : 0,
        vSearch = document.querySelector('.m-sech-wrap') ? document.querySelector('.m-sech-wrap').offsetHeight : 0,
        vTab = document.querySelector('.vuxTab') ? document.querySelector('.vuxTab').offsetHeight : 0,
        vExcep = document.querySelector('.excep') ? document.querySelector('.excep').offsetHeight : 0,
        vWrap = document.querySelector('#vWrap') ? document.querySelector('#vWrap').offsetHeight : 0,
        vTopTItle = document.querySelector('.car-pc-title') ? document.querySelector('.car-pc-title').offsetHeight : 0,
        vFbtn = document.querySelector('.form-btn') ? document.querySelector('.form-btn').offsetHeight : 0;

    if (getStyle('.car-bbinfo-card', 'marginBottom') > 0) {
      vBBInfoCard += getStyle('.car-bbinfo-card', 'marginBottom');
    }

    if (getStyle('.car-pc-title', 'marginBottom') > 0) {
      vTopTItle += getStyle('.car-pc-title', 'marginBottom');
    }

    if (getStyle('.bbtitle', 'marginBottom') > 0) {
      vBBtitle += getStyle('.bbtitle', 'marginBottom');
    }

    if (getStyle('.excep', 'marginBottom') > 0) {
      vExcep += getStyle('.excep', 'marginBottom');
    }

    commit('updateConHeight', 0 - (vHeader + vProgress + vFooter + vBar + vBBar + vBBtitle + vBBInfoCard + vSearch + vTab + vExcep + vWrap + vFbtn + vTopTItle));

    function getStyle(arg, attr) {
      let obj = document.querySelector(arg);
      if(obj){
        if (obj.currentStyle) {
          return obj.currentStyle[attr].replace('px','') * 1;
        } else {
          return document.defaultView.getComputedStyle(obj, null)[attr].replace('px', '') * 1;
        }
      } else {
        return 0;
      }
    }
  },
}

// mutations
//更新当前使用环境
const mutations = {
  updateShellEnv(state, arg) {
    state.showAppBar = arg;
  },
  updateAppBarTitle(state, arg) {
    state.appBarTitle = arg;
  },
  updateUserInfo(state, arg) {
    state.userInfo = arg;
  },
  updateConHeight(state, arg) {
    state.conHeight = arg;
  },
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}